<template>
	<view class="content">
		<h1>您好,请登录!</h1>
		<view class="login d-flex justify-content-center flex-column margin-0">
			<input type="text" v-model="account" maxlength="11" value="" placeholder="账号" />
			<input type="password" v-model="password" value="" placeholder="密码" />
		</view>
		<view class="radio">
			<label>
				<radio @tap="radio" :checked="flag" />已阅读并同意<text style="color: red;">《使用协议》</text>
			</label>
		</view>
		<view class="btn">
			<button :style="{backgroundColor:bg}" @tap="send">登录</button>
		</view>
		<view class="next">
			<navigator url="/pages/newrevise/newrevise">忘记密码？</navigator>
			<navigator url="/pages/register/register">注册新账号</navigator>
		</view>
		<u-logo></u-logo>
	</view>
</template>
<script>
	import config from '../../module/request.js'
	import logo from '../../components/logo.vue'
	export default {
		components: {
			"u-logo": logo
		},
		data() {
			return {
				flag: false,
				//账号
				account: '',
				password: '',
				bg: '#F27F88',
				url: config.url,
				token: ''
			}
		},
		methods: {
			radio() {
				this.flag = !this.flag
			},
			// 登录
			send() {
				if (this.flag == false) {
					uni.showToast({
						title: '请先勾选协议',
						icon: "none"
					});
				} else {
					if (this.account && this.password !== '') {
						uni.request({
							method: "POST",
							header: {
								'content-type': 'application/x-www-form-urlencoded',
							},
							url: this.url + '/login',
							data: {
								name: this.account,
								password: this.password
							},
							success: res => {
								if (res.data == '密码错误') {
									uni.showToast({
										title: '密码错误',
										icon: 'none'
									})
								}
								 else if (res.data.error == '账号或者密码错误') {
									uni.showToast({
										title: '账号或者密码错误',
										icon: 'none'
									})
								}
								else if (res.data.error == '查找失败') {
									uni.showToast({
										title: '网络错误',
										icon: 'none'
									})
								}

								//登录成功
								else {
									
									this.token = res.data
									uni.showToast({
										title: '登录成功',
										icon: 'none',
									})
									uni.reLaunch({
										url: '../profile/profile'
									})
									uni.setStorage({
										key: 'token',
										data: res.data
									})

								}
							}
						})
					} else {
						uni.showToast({
							title: '请输入账号与密码',
							icon: 'none'
						})
					}
				}
			},
		},
		watch: {
			account(n, o) {
				if (n !== '') {
					this.bg = 'red'
				} else {
					this.bg = '#F27F88'
				}
			}
		},

	}
</script>
<style lang="less" scoped>
	.content {
		overflow: hidden;
	}


	.next {
		display: flex;
		justify-content: space-between;
		width: 630upx;
		margin: 0 auto;

		navigator {
			color: #E60012;
		}
	}

	.btn {
		width: 630upx;
		margin: 0 auto;
		margin-bottom: 28upx;
		margin-top: 60upx;
	}

	.btn button {
		color: white;
	}

	.radio {
		margin-top: 30upx;
		width: 630upx;
		margin: 30upx auto;
	}

	h1 {
		font-family: PingFang-SC-Bold;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0px;
		color: #444444;
		margin-left: 58upx;
		margin-top: 60upx;
		font-size: 50upx;
	}

	input {
		width: 630upx;
		border-bottom: 1px solid #dadada;
		margin-top: 60upx;
		padding-bottom: 30upx;
	}

	.login {
		width: 630upx;
		margin-top: 148upx;
	}
</style>
